<template>
  <transition>
    <div class="load"
         v-show="show">
      <spinner :type="type"
               :size="size" />
    </div>
  </transition>
</template>

<script>
import { LOAD_SPINNER } from '../../assets/js/config'
import Spinner from '../../components/spinner'

export default {
  name: 'load',
  props: {
    show: Boolean,
    type: {
      type: String,
      default: LOAD_SPINNER
    },
    size: {
      type: Number,
      default: 10
    }
  },
  components: {
    Spinner
  }
}
</script>

<style lang="stylus" scoped>
.v-leave-to
  opacity 0
.v-enter-active,
.v-leave-active
  transition all 0.2s
.spinner >>>
  svg
    position absolute
    top 50%
    left 50%
    width 40px
    height 40px
    transform translate(-50%, -50%)
.load
  position fixed
  top 0
  right 0
  bottom 0
  left 0
  z-index 222
  // background-color #fff
  .spinner,
  .c_spinner
    position absolute
    top 50%
    left 50%
    transform translate(-50%, -50%)
</style>
